<!DOCTYPE html>
<html>
<head>
    <title>Capacitance Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = canvas.width / 2;
        const cy = 180; // Center Y, leaving space for caption
        const R = 80;
        const R_prime = 130;
        const lineWidth = 2;
        const chargeRadius = R - 12; // Radius for placing charge symbols
        const numCharges = 12;

        // --- Drawing ---

        // In the source image, the dielectric shell (R to R') is a solid light gray,
        // and the inner sphere (0 to R) is a textured, slightly darker gray.
        // We will simulate this by drawing the larger filled circle representing the dielectric medium
        // and then drawing the smaller filled circle for the metallic sphere on top of it.

        // 1. Fill the entire region up to R' with a light gray color
        // This represents the dielectric material extending from the center to R'.
        ctx.beginPath();
        ctx.arc(cx, cy, R_prime, 0, 2 * Math.PI);
        ctx.fillStyle = '#f0f0f0'; // Very light gray for dielectric
        ctx.fill();

        // 2. Fill the inner sphere
        // The source shows this as a textured gray. We'll use a solid, slightly darker gray.
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.fillStyle = '#e0e0e0'; // Light gray for metallic sphere
        ctx.fill();

        // 3. Stroke the outer circle (boundary of dielectric)
        ctx.beginPath();
        ctx.arc(cx, cy, R_prime, 0, 2 * Math.PI);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = lineWidth;
        ctx.stroke();

        // 4. Stroke the inner circle (metallic sphere)
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = lineWidth;
        ctx.stroke();

        // 5. Draw the positive charges on the metallic sphere
        ctx.fillStyle = 'black';
        ctx.font = 'bold 16px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        for (let i = 0; i < numCharges; i++) {
            // Distribute charges evenly, slightly rotated to not be on the axes
            const angle = (i / numCharges) * 2 * Math.PI + (Math.PI / numCharges);
            const x = cx + chargeRadius * Math.cos(angle);
            const y = cy + chargeRadius * Math.sin(angle);
            ctx.fillText('+', x, y);
        }

        // 6. Draw radius lines and labels
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;

        // Radius R
        // Angle chosen to match the image, approx -60 degrees
        const angleR = -Math.PI / 3;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R * Math.cos(angleR), cy + R * Math.sin(angleR));
        ctx.stroke();

        // Label R
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        // Place label at a suitable position relative to the line
        const labelRAngle = -75 * Math.PI / 180;
        const labelRRadius = R * 0.7;
        ctx.fillText('R', cx + labelRRadius * Math.cos(labelRAngle), cy + labelRRadius * Math.sin(labelRAngle));

        // Radius R'
        // Angle chosen to match the image, approx -30 degrees
        const angleR_prime = -Math.PI / 6;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R_prime * Math.cos(angleR_prime), cy + R_prime * Math.sin(angleR_prime));
        ctx.stroke();

        // Label R'
        // Place label in the middle of the shell part of the line
        const labelR_primeAngle = -28 * Math.PI / 180;
        const labelR_primeRadius = R + (R_prime - R) * 0.6;
        ctx.fillText("R'", cx + labelR_primeRadius * Math.cos(labelR_primeAngle), cy + labelR_primeRadius * Math.sin(labelR_primeAngle));


        // 7. Draw the caption
        ctx.font = '24px "SimSun", "Songti SC", sans-serif'; // Common Chinese fonts
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 7-62 图', cx, canvas.height - 10);

    </script>
</body>
</html>